<template>
    <div
        style="padding-top: 40px"
        v-loading="pageLoading"
        element-loading-text="正在加载,请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div style="margin: 5px 10px 30px 15px">
            <!-- 1. 基础信息 -->
            <div>
                <!-- 标题 -->
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">基础信息</h3>
                    </el-col>
                </el-row>

                <!-- 内容 -->
                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="转让标的名称">
                                <el-input v-model="infoForm.name" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="项目编号">
                                <el-input v-model="infoForm.number" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="转让底价">
                                <el-input v-model="infoForm.transferBasePrice" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 2. 报价方式 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">报(竞)价方式</h3>
                    </el-col>
                </el-row>

                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="报价结束时间">
                                <el-date-picker
                                    v-model="infoForm.offerEndTime"
                                    type="datetime"
                                    placeholder="选择看样时间"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :disabled="isEdit"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="报价规则">
                                <el-input
                                    v-model="infoForm.offerRule"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="报价标的简介">
                                <el-input
                                    v-model="infoForm.transferBrief"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 3. 竞买登记 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">竞买登记</h3>
                    </el-col>
                </el-row>

                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="报名方式">
                                <el-input
                                    v-model="infoForm.applyWay"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="看样时间">
                                <el-date-picker
                                    v-model="infoForm.seeTime"
                                    type="datetime"
                                    placeholder="选择看样时间"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :disabled="isEdit"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="看样地点">
                                <el-input v-model="infoForm.seeSite" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="保证金及处理方式">
                                <el-input
                                    v-model="infoForm.earnestMoney"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- 4. 交易方式 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <h3 class="small-title">交易方式</h3>
                    </el-col>
                </el-row>

                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="18">
                            <el-form-item label="交易地点">
                                <el-input v-model="infoForm.dealSity" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="成交确认、价款支付及合同签订">
                                <el-input v-model="infoForm.affirm" placeholder="" type="textarea" :rows="10" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="转让标的交割">
                                <el-input
                                    v-model="infoForm.transferDelivery"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="风险提示">
                                <el-input
                                    v-model="infoForm.riskHint"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="其他事项">
                                <el-input
                                    v-model="infoForm.otherThing"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="联系方式">
                                <el-input
                                    v-model="infoForm.contactWay"
                                    placeholder=""
                                    type="textarea"
                                    :rows="10"
                                    :disabled="isEdit"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="18">
                            <el-col :span="6">
                                <div v-if="isEdit == true && infoForm.attachment">
                                    附件: <el-button type="primary" @click="downFile(infoForm.attachment)">下载查看</el-button>
                                </div>
                                <div v-else>附件: <el-button type="primary" :disabled="true">暂无附件</el-button></div>
                            </el-col>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <!-- 4. 审核操作 -->

        <div style="margin: 30px 10px 60px 10px">
              
            <div>
                <span>审核情况</span>
            </div>

            <div style="margin: 30px 30px 60px 30px">
                <el-row :gutter="8">
                    <el-col :span="6"> <div>审批人</div> </el-col>
                    <el-col :span="18">
                        <el-col :span="6"><div>审核状态</div></el-col>
                        <el-col :span="6"><div>审批时间</div></el-col>
                        <el-col :span="6"><div>审批原因</div></el-col>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                    <el-col :span="6">
                        <div v-for="(item, index) in flowLogRes" :key="index" :title="item.curApproverId" :style="item.style">
                            {{ item.curApproverId }}
                        </div>
                    </el-col>

                    <el-col :span="18">
                        <div v-for="(item, index) in flowLogRes" :key="index" :style="item.style">
                            <el-row>
                                <el-col :span="6">
                                    <div>{{ item.status }}</div>
                                </el-col>

                                <el-col :span="6">
                                    <div>{{ item.approveTime }}</div>
                                </el-col>

                                <el-col :span="6">
                                    <div>{{ item.advise }}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div v-if="this.opShow">
            <div style="margin: 30px 10px 30px 10px">
                <el-form :model="dataForm" ref="dataForm">
                    <el-form-item label="审核意见">
                        <el-input v-model="dataForm.checkReason" placeholder="输入审核意见" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <el-row type="flex" justify="center" style="margin: 30px 10px 60px 10px">
                <div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dataFormSubmit(0)">通过</el-button>
                        <el-button type="primary" @click="dataFormSubmit(1)">拒绝</el-button>
                        <el-button @click="closePage()">取消</el-button>
                    </span>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';

export default {
    components: {},
    data() {
        return {
            pageLoading: false,
            isEdit: true,

            //- 基础信息
            infoForm: {
                name: '', //转让标的名称
                number: '', //项目编号
                transferBasePrice: '', //转让底价

                offerEndTime: '', //报价结束时间
                offerRule: '', //报价规则
                transferBrief: '', //转让标的简介

                applyWay: '', //报名方式
                seeSite: '', //看样地点
                seeTime: '', //看样时间
                earnestMoney: '', //保证金及处理方式

                dealSity: '', //交易地点
                affirm: '', //成交确认、价款支付及合同签订
                transferDelivery: '', //转让标的交割
                riskHint: '', //风险提示
                otherThing: '', //其他事项
                contactWay: '', //联系方式

                attachment: '' //附件
            },

            //- 审批情况
            flowLogRes: [],

            //- 审核状态
            dataForm: {
                checkReason: '' //审批原因
            },

            //- 公用
            opShow: true,
            pageFlag: '',
            pageData: null
        };
    },
    mounted() {
        var itemData = this.$route.query.itemData;
        var type = this.$route.query.type;
        if (type == 2) {
            var id = itemData.id;

            this.getPageDeail(id, itemData.opFlag); // 获取基本信息
        }

        this.dialogType = type;
    },

    methods: {
        // //上传附件 成功回调
        // moreUpFileSuccessHandle([url, sigleImgId, response, file, fileList]) {
        //     this.infoForm.attachment = sigleImgId;
        //     console.log('上传id：', sigleImgId);
        // },
        // //上传附件 失败回调
        // moreUpFileErrorHandle(val) {
        //     this.$message.error(`文件上传失败`);
        // },

        // //上传附件 文件预览回调
        // moreUpFileHandlePreview(file) {
        //     console.log('文件预览回调', file);
        //     window.location.href =
        //         window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&id=' + file.response.result[0];
        // },

        // 获取页面详情
        getPageDeail(id, opFlag) {
            var _that = this;

            var tick;
            let params = {
                id: id //产权id
            };
            console.log('传递的参数：', params);

            _that.pageLoading = true;

            //详情
            API.iapropertyright.lookiaPropertyRightAuditDetail(params).then((res) => {
                if (res.code == '0000') {
                    console.log(res);

                    _that.pageData = res.result;
                    _that.infoForm = res.result;

                    _that.flowLogRes = res.result.flowLogRes; //审批情况 审批流程列表
                    for (let index = 0; index < _that.flowLogRes.length; index++) {
                        let element = _that.flowLogRes[index];

                        //样式处理
                        if (index == 0) {
                            element.style = 'margin-top: 0px;';
                        } else {
                            element.style = 'margin-top: 40px;';
                        }

                        //审核状态处理
                        switch (element.status) {
                            // 审核状态：2-已提交 3-已提交  4-审核驳回 5-审核通过
                            case 2:
                                element.status = '待处理';
                                break;
                            case 3:
                                element.status = '已提交';
                                break;
                            case 4:
                                element.status = '审核驳回';
                                break;
                            case 5:
                                element.status = '审核通过';
                                break;
                        }
                    }

                    //审批完成隐藏所有操作按钮
                    if (_that.pageData.flowStatusEnumStr != null && _that.pageData.flowStatusEnumStr === '审核通过(完成)') {
                        this.opShow = false;
                    }

                    //详情进入隐藏所有操作按钮
                    if (opFlag === '1') {
                        this.opShow = false;
                    }

                    _that.pageLoading = false;
                }
            });
        },

        //查看附件
        downFile(downId) {
            var reg = new RegExp('http://');

            if (reg.test(downId)) {
                var idIndex = downId.indexOf('id=');
                var idStr = downId.substring(idIndex, downId.length);

                if (idStr.indexOf('id=') != -1) {
                    window.location.href = window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&' + idStr;
                }
            } else {
                window.location.href = window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&id=' + downId;
            }
        },

        //- 通过或拒绝
        dataFormSubmit(type) {
            if (type == 1 && this.dataForm.checkReason == '') {
                // 拒绝
                this.$message.error('请填写审核意见，并说明拒绝原因');
                return;
            }

            var params = {
                checkReason: this.dataForm.checkReason,
                id: this.infoForm.id, //详情id
                checkStatus: type // 0:通过;1:驳回
            };

            API.iapropertyright.approveOrRejectAudit(params).then((data) => {
                if (data.code == '0000') {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.closePage();
                        }
                    });
                }
            });
        },
        closePage() {
            this.$router.go(-1);
        }
    }
};
</script>
